<template>
<div>
  <div class="table-seatch-flex">
    <div class="table-search">
      <div class="search-left">
        <div class="search-item">
          <span class="search-label">资源方</span>
          <div class="search-input">
            <a-select
                v-model:value="resSide"
                :style="{width: '100%'}"
                ref="select"
                allowClear
                :bordered="false"
                placeholder="请选择资源方"
                :options="sellerOption"
                :fieldNames="{
                  label: 'seller',
                  value: 'id'
               }"
            >
            </a-select>
          </div>
        </div>
        <div class="search-btn">
<!--          <div class="search-icon">-->
<!--            <a-cascader-->
<!--                v-model:value="value"-->
<!--                placeholder="Please select"-->
<!--                :options="selectOption"-->
<!--                :fieldNames="{-->
<!--                  label: 'name',-->
<!--                  value: 'key'-->
<!--                }"-->
<!--                @change="onChange"-->
<!--            >-->
<!--              <PlusOutlined/>-->
<!--            </a-cascader>-->
<!--          </div>-->
          <a-button class="search-btn2" @click="resetCustom">
            <template #icon>
              <RedoOutlined/>
            </template>
            重置
          </a-button>
          <a-button class="search-btn1" @click="searchTable">查询</a-button>
          <!--          <a-button type="text">更多筛选条件</a-button>-->
        </div>
      </div>
    </div>
    <div class="search-btn">
      <a-button class="search-btn1" @click="goAdd" v-if="stateObj.state !== '3'">
        <template #icon>
          <PlusOutlined />
        </template>
        新增</a-button>
      <a-button class="border-btn" @click="allGanttExport" v-preventReClick>
        <template #icon>
          <UploadOutlined />
        </template>
        导出</a-button>
    </div>
  </div>
  <div class="table-box">
    <div class="table-btn-flex">
      <div class="table-head-btn">
        <a-radio-group v-model:value="activeKey" style="margin: 8px">
          <a-radio-button value="1">年度计划</a-radio-button>
          <a-radio-button value="2">尝试排布</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="table-div">
      <YearsPlanGantt v-if="activeKey === '1'" :activeKey="activeKey"
                      :allExport="allExport" :isAdd="isAdd"
                      :stateObj="stateObj"
                      :resSide="changeResside"
                      @exportTable="exportTable"
                      @getImgData="getImgData"
                      @updatePlanId="updatePlan"/>
      <TrialTimelineGantt v-if="activeKey === '2'" :activeKey="activeKey" :planId="planId" @updateData="updateData"/>
    </div>
  </div>
  <AddPlanSchedInfo ref="AddInfo" @saveMemForm="onSavePlan"></AddPlanSchedInfo>
</div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref, watch} from "vue";
import {PlusOutlined, UploadOutlined, RedoOutlined} from '@ant-design/icons-vue';
import YearsPlanGantt from '../YearsPlan/YearsPlanGantt.vue'
import TrialTimelineGantt from '../YearsTrial/TrialTimelineGantt.vue'
import AddPlanSchedInfo from './AddPlanSchedInfo.vue'
const activeKey = ref('1')
import { useRoute } from 'vue-router';
import {message} from "ant-design-vue";
const route = useRoute()
const stateObj = ref(route.query)
console.log('路由', stateObj)
const { proxy  } = getCurrentInstance()
const resSide = ref(undefined)
const changeResside = ref('')
const ganttData = ref({})
// 重置
const resetCustom = () => {
  resSide.value = undefined
}
// 查询
const searchTable = () => {
  changeResside.value = resSide.value
}
const AddInfo = ref()
const goAdd = () => {
  AddInfo.value.showModal()
}
const isAdd = ref(0)
watch(() => isAdd.value, (newVal) => {
  isAdd.value = newVal
}, {
  deep: true
})
const onSavePlan = (val) => {
  console.log('传过来的数据val', val)
  isAdd.value++
}
const updateData = () => {
  activeKey.value = '1'
}
const planId = ref('')
const updatePlan = (val) => {
  planId.value = val
}
/**
 * 所有甘特图还有图表导出
 * */
const allExport = ref(false)
const imgData = ref([])
const exportList = ref({
  pictureUrl: {
    shipUrl: '',
    sellerUrl: '',
    goodsUrl: ''
  },
  searchItem: resSide.value,
  ids: []
})
const getImgData = (val) => {
  imgData.value = []
  imgData.value.push(val)
  imgData.value.map(item => {
    if (item.name === '船舶排布') {
      exportList.value.pictureUrl.shipUrl = item.imgData
    }
    if (item.name === '资源方排布') {
      exportList.value.pictureUrl.sellerUrl = item.imgData
    }
    if (item.name === '货源排布') {
      exportList.value.pictureUrl.goodsUrl = item.imgData
    }
  })
  console.log('获取到的img图片地址', imgData.value)
  console.log('获取到的img图片地址exportList.value.pictureUrl', exportList.value.pictureUrl)
}
const exportTable = (val) => {
  if (val && val.length > 0) {
    val.map(item => {
      exportList.value.ids.push(item.id)
    })
  }
}
const allGanttExport = () => {
  console.log('实现了防抖哈A', exportList.value)

  allExport.value = true
  if (exportList.value.pictureUrl.goodsUrl && exportList.value.pictureUrl.shipUrl && exportList.value.pictureUrl.sellerUrl) {
    exportGanttTabel()
  }
}
const exportGanttTabel = () => {
  exportList.value.searchItem = changeResside.value
  console.log('实现了防抖哈', exportList.value)
  proxy.$api.postPageLngGanttExport(exportList.value).then(res => {
    if (res.resultCode === 0) {
      message.success('导出成功')
      // 创建一个隐藏的链接元素用于下载
      let a = document.createElement('a');
      a.href = res.resultObject;
      // 模拟点击下载链接
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      // 清理下载链接元素
      document.body.removeChild(a);
    }
    allExport.value = false
  }).catch(_ => {
    allExport.value = false
  })
}
watch(() => exportList.value, (newVal) => {
  if (newVal.pictureUrl.goodsUrl && newVal.pictureUrl.shipUrl && newVal.pictureUrl.sellerUrl) {
    exportGanttTabel()
  }
}, {
  deep: true
})
/**
 * 获取资源方
 * */
const sellerOption = ref([])
const getSeller = () => {
  proxy.$api.getAllSeller().then(res => {
    sellerOption.value = res.resultObject
    sellerOption.value.map(item => {
      Object.assign(item, {
        id: item.id.toString()
      })
    })
    console.log('获取的资源方', res.resultObject)
  })
}
onMounted(() => {
  stateObj.value = route.query
  getSeller()
})
</script>

<style lang="scss" scoped>
.table-seatch-flex {
  background: #ffffff;
  padding: 24px 0 0 0;
  margin-bottom: 24px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  .table-search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      .search-item {
        margin-left: 10px;
        border: 1px solid  #DCDEE0;
        height: 34px;
        line-height: 32px;
        display: flex;
        width: 320px;
        margin-bottom: 24px;
        position: relative;
        font-size: 14px;
        .search-label {
          display: block;
          //width: 80px;
          line-height: 32px;
          color: #2C3749;
          padding: 0 12px;
          text-align: left;

        }
        .search-input {
          width: 247px;
          text-align: left;
        }
        .close-btn {
          position: absolute;
          top: -17px;
          right: -4px;
        }
      }
      .search-btn {
        margin-left:20px;
        display: flex;
        margin-bottom: 12px;
        .search-btn1 {
          background: #f5001d;
          border-radius: 2px;
          color: #fff;
          padding: 0 20px;
        }
      }
    }
    .search-right {
      display: flex;
      margin-top: 15px;
      .search-input {
        text-align: left;
      }
    }
  }
  .search-btn {
    margin-right:20px;
    display: flex;
    margin-bottom: 12px;
    .search-btn1 {
      background: #f5001d;
      border-radius: 2px;
      color: #fff;
      padding: 0 20px;
    }
  }
}
.gutter-row {
  width: 17%;
}


.table-box {
  // background: #ffffff;
 // padding: 20px;
  margin-bottom: 10px;
}
.table-btn-flex {
  width: 100%;
  display: flex;
  background: #ffffff;
  height: 96px;
  border-bottom: 1px solid #DCDEE0;
  .table-head-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 25px;
    padding: 0 20px;
  }
  .right-btn {
    margin-top: 5px;
    display: flex;
    .cascader-box {
      border: 1px solid #F5001D;
      height: 32px;
      line-height: 32px;
      margin-right: 8px;
      color: #F5001D;
      display: flex;
      min-width: 100px;
    }
  }
  .ant-radio-button-wrapper-checked {
    background: #0062AD;
    color: #ffffff;
  }
}
</style>
